<%@ include file="/includes/taglibs.jsp"%>
<form method="post" name="form-data" id="form-data">
	<div class="row-fluid">
		<div class="span8">
			<ul class="breadcrumb">
				<li>Menu</li>
			</ul>
		</div>
		<div class="span4">
			<input type="hidden" name="delete" value="delete" />
			<input type="submit" value="remove selected row/s" class="btn btn-info" />
			<input type="button" value="add item" class="btn btn-info" 
				onclick='location.href="<c:url value="/menu/form.html"/>"' />
		</div>
		
	</div>
<table class="table table-striped table-bordered" id="menu">
  <thead>
    <tr>
    	<th width="50px"><input type="checkbox" name="checkAll" id="checkAll" value="true" /></th> 
    	<th width="30%" >Menu Name</th>
    	<th width="30%" >Link</th>
    	<th>Caption</th>
    	<th>Parent</th>
    	<th>Level</th>
    	<th></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
</form>
<script type="text/javascript">
	var datatable2Rest = function(sSource, aoData, fnCallback) {
	    //extract name/value pairs into a simpler map for use later
	    var paramMap = {};
	    for ( var i = 0; i < aoData.length; i++) {
	        paramMap[aoData[i].name] = aoData[i].value;
	    }
	
	    //page calculations
	    var pageSize = paramMap.iDisplayLength;
	    var start = paramMap.iDisplayStart;
	    var pageNum = (start == 0) ? 1 : (start / pageSize) + 1; // pageNum is 1 based
	
	    // extract sort information
	    var sortCol = paramMap.iSortCol_0;
	    var sortDir = paramMap.sSortDir_0;
	    var sortName = paramMap['mDataProp_' + sortCol];
	
	    //create new json structure for parameters for REST request
	    var restParams = new Array();
	    restParams.push({"name" : "limit", "value" : pageSize});
	    restParams.push({"name" : "page", "value" : pageNum });
	    restParams.push({"name" : "sort", "value" : sortName });
	    restParams.push({"name" : "dir", "value" : sortDir });
	
	    //if we are searching by name, override the url and add the name parameter
	    var url = sSource;
	    if (paramMap.sSearch != '') {
	        url = '<c:url value="/menu/findByNameContains"/>';
	        restParams.push({ "name" : "menuname", "value" :  paramMap.sSearch});
	    }
	
	    //finally, make the request
	    $.ajax({
	        "dataType" : 'json',
	        "type" : "GET",
	        "url" : url,
	        "data" : restParams,
	        "success" : function(data) {
	            data.iTotalRecords = data.totalElements;
	            data.iTotalDisplayRecords = data.totalElements;
	            
	            fnCallback(data);
	        }
	    });
	};	
    $(document).ready(function() {
    	
    	var oTable = $('#menu').dataTable( {
        	"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
            "bProcessing": true,
            "bServerSide": true,
            "fnServerData" : datatable2Rest,
            "sAjaxDataProp" : "content",
            "sAjaxSource": '<c:url value="/menu/search"/>',
            "sPaginationType": "bootstrap",
            "oLanguage": {"sLengthMenu": "_MENU_ records per page",
                "sInfo": "Displaying _START_ to _END_ of _TOTAL_ records"},
            "aoColumns":[
				{"mDataProp": "menuid",
	             "mRender": function (data, type, full) {
	            	 	if($("#checkAll").is(':checked')){
	            	 		return '<input type="checkbox" name="removeId" id="removeId" checked = "checked" value="' + data + '">';
	            	 	}else{
	            	 		if(full.levels == 0)
	                    		return '<input type="checkbox" name="removeId" id="removeId" value="' + data + '">';
	                    	if(full.levels == 1)
	                    		return '&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="removeId" id="removeId" value="' + data + '">';
	                    	if(full.levels == 2)
	                    		return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="removeId" id="removeId" value="' + data + '">';
	                    		
	            	 	}
	                }
				},
                {"mDataProp":"menuname"},
                {"mDataProp":"link"},
                {"mDataProp":"caption"},
                {"mDataProp":"parent"},
                {"mDataProp":"levels"},
                {"mDataProp":"menuid",
                	"mRender" : function(data,type,full){
                		
                	return '<input type="button" name="updateBtn" id="updateBtn" value="Update" onclick=document.location.href="<c:url value="/menu/form.html?itemId='+data+'"/>" class="btn btn-info" />';
                }}
                ]
        } );
    	
		$('form[name="form-data"]').submit(function() {
			console.log("masuk");
			if(confirm("Are you sure you want to delete")) {
				var arrdelete = [];

				$('#removeId:checked').each(function(i){
				 	arrdelete[i] = $(this).val();
				});
				console.log(JSON.stringify(arrdelete));
				$.ajax({
		        	type: "POST",
		        	url : '<c:url value="/menu/deletes"/>', 
		        	contentType: "application/json; charset=utf-8",
		        	dataType: "json",
		        	data: JSON.stringify(arrdelete)
		        }).done(function( msg ) {
		          //alert( "Info: " + msg );
		          oTable.fnDraw();
		        });
 			}
	        return false;
	    });
    });    
</script>